<template>
  <div class="g-con main">
    <div class="left">
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix card-header"
        >
          <span>{{ t('organizationStructure.Information.t1') }}</span>
          <el-button
            type="primary"
            @click="isEdit = true"
            v-if="!isEdit"
          >
            {{ t('organizationStructure.Information.edit') }}</el-button
          >
          <el-button
            type="primary"
            @click="saveChangeInfo()"
            v-else
            >{{ t('organizationStructure.Information.save') }}</el-button
          >
        </div>
        <div class="page-divider"></div>
        <el-form>
          <el-row>
            <el-col
              :span="23"
              :offset="1"
            >
              <el-form-item>
                <p>{{ t('personalInformation.p1') }}: {{ customerInfo.customerRoleName }} - {{ customerInfo.userTypeName }}</p>
              </el-form-item>
              <el-form-item v-if="locale === 'zh-CN'">
                <p v-if="!isEdit">{{ t('personalInformation.p6') }}: {{ customerInfo.userNameCn }}</p>
                <el-input
                  v-else
                  v-model="customerInfo.userNameCn"
                  :placeholder="t('personalInformation.p6')"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <p>{{ t('personalInformation.p2') }}: {{ customerInfo.country }} - {{ customerInfo.continentName }}</p>
              </el-form-item>
              <el-form-item>
                <p>{{ t('personalInformation.p3') }}: {{ customerInfo.email }}</p>
              </el-form-item>
              <!-- 船员 -->
              <el-form-item v-if="['15'].includes(customerClassCode)">
                <p v-if="!isEdit">{{ t('personalInformation.p4') }}: {{ getWorkStatus(customerInfo.workStatus) }}</p>
                <el-select
                  v-else
                  v-model="customerInfo.workStatus"
                  :placeholder="t('personalInformation.p4')"
                  class="wp-100"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in workStatusOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <p v-if="!isEdit">{{ t('personalInformation.p5') }}: {{ customerInfo.slogan }}</p>
                <el-input
                  v-model="customerInfo.slogan"
                  type="textarea"
                  :placeholder="t('personalInformation.p5')"
                  v-else
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix card-header"
        >
          <span>{{ t('organizationStructure.Information.t2') }}</span>
          <span type="text">
            <el-button
              type="primary"
              @click="uploadDialog = true"
              >{{ t('organizationStructure.Information.upload') }}</el-button
            >
          </span>
        </div>
        <div class="page-divider"></div>
        <ul class="img-list">
          <li
            v-for="(item, index) in queryAlbumList"
            :key="index"
            @click="deleteDialog = true"
          >
            <!-- openImgdialog -->
            <img
              :src="item"
              alt=""
            />
          </li>
        </ul>
      </el-card>
    </div>
    <div class="right">
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix card-header"
        >
          <span>{{ t('organizationStructure.Information.t3') }}</span>
          <span type="text">
            <el-button
              type="primary"
              @click="openDialog"
              >{{ t('organizationStructure.Information.bt3') }}</el-button
            >
          </span>
        </div>
        <div class="page-divider"></div>
        <div class="list-box noscrollbar">
          <ul
            v-for="item in trendsListData"
            :key="item"
            class="item"
          >
            <img
              src="@/assets/img/icon_shanchu_bg.png"
              class="del-btn"
              @click="deleteTrendsFn(item)"
            />
            <!-- <li class="date-type">
              <div>
                {{ dateFormat(item.createTime, 2) }}
                <i v-if="item.operateType == 0">{{ t('organizationStructure.operateType1') }}</i>
                <i v-if="item.operateType == 1">{{ t('organizationStructure.operateType2') }}</i>
                <i v-if="item.operateType == 2">{{ t('organizationStructure.operateType3') }}</i>
                <i v-if="item.trendsType == 0">{{ t('organizationStructure.trendsType1') }} </i>
                <i v-if="item.trendsType == 1">{{ t('organizationStructure.trendsType2') }} </i>
                <i v-if="item.trendsType == 2">{{ t('organizationStructure.trendsType3') }} </i>
                <span>——</span>
              </div>
              <img
                src="@/assets/img/icon_shanchu_bg.png"
                alt=""
                @click="deleteTrendsFn(item)"
              />
            </li> -->
            <li
              class="title"
              @click="viewDetail(item)"
            >
              {{ item.trendsTitle || '' }}
            </li>
            <div class="content noscrollbar">
              {{ item.isShowMore ? item.trendsSummary : toText(item.trendsSummary, 150) }}
              <span
                v-if="item.trendsSummary?.length > 150"
                class="show-more"
                @click="item.isShowMore = !item.isShowMore"
              >
                {{ item.isShowMore ? t('blog.b2') : `...${t('blog.b1')}` }}
              </span>
            </div>
            <ActicleComment
              :item="item"
              idkey="articleId"
              @getList="getTrendsListFn"
            />
          </ul>
        </div>
        <div class="flexcc mt-3">
          <el-pagination
            layout="prev, pager, next"
            :hide-on-single-page="total <= page.pageSize"
            :total="total"
            v-model:current-page="page.pageNum"
            :page-size="page.pageSize"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <!-- 删除图片 -->
    <el-dialog
      v-model="deleteDialog"
      width="950px"
      class="pre-box"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4
            :id="titleId"
            :class="titleClass"
          >
            {{ t('organizationStructure.dlt2') }}
          </h4>
          <img
            src="@/assets/img/icon_guanbi.png"
            @click="close"
            class="close"
          />
        </div>
      </template>

      <div class="pre-img">
        <!-- <img :src="chooseImgUrl" alt="" /> -->
        <el-image
          :src="chooseImgUrl"
          fit="contain"
          style="width: 820px; height: 330px"
        ></el-image>
        <el-button
          type="primary"
          @click="deleteImgFn"
          >{{ t('organizationStructure.dlb1') }}</el-button
        >
      </div>
      <ul class="thumbnail-list">
        <li
          v-for="(item, index) in queryAlbumList"
          :key="index"
          @click="chooseImgUrl = item"
          :class="chooseImgUrl == item ? 'active' : ''"
        >
          <img
            :src="item"
            alt=""
          />
        </li>
      </ul>
    </el-dialog>

    <!-- 发布文章 -->
    <el-dialog
      v-model="diaologVis"
      width="1000px"
      @close="closeFn"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4
            :id="titleId"
            :class="titleClass"
          >
            {{ t('organizationStructure.dlt3') }}
          </h4>
          <img
            src="@/assets/img/icon_guanbi.png"
            @click="close"
            class="close"
          />
        </div>
      </template>

      <el-form
        ref="txtFormEl"
        :model="txtForm"
        :rules="txtRules"
      >
        <el-row>
          <el-col
            :span="10"
            class="user-info"
          >
            <div class="head-sculpture">
              <img
                :src="creatorInfo.avatar"
                alt=""
              />
            </div>
            <div class="name">
              <h2
                class="line-1"
                style="max-width: 300px"
              >
                {{ creatorInfo.customerName }}
              </h2>
              <p>{{ creatorInfo.label }}</p>
            </div>
          </el-col>
          <el-col :span="14">
            <el-form-item prop="articleTitle">
              <el-input
                style="height: 40px"
                v-model.trim="txtForm.articleTitle"
                :placeholder="t('organizationStructure.Information.p14')"
                :maxlength="100"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="24"
            class="mt-3 partition"
          >
            <span>*</span>
            {{ t('organizationStructure.subzone') }}：
          </el-col>
        </el-row>
        <el-form-item prop="zoningId">
          <div class="btn-list">
            <el-button
              :class="{ active: txtForm.zoningId == item.id }"
              v-for="(item, index) in zoningList"
              :key="index"
              @click="txtForm.zoningId = item.id"
              >{{ item.zoningNameCn }}</el-button
            >
          </div>
        </el-form-item>
        <el-form-item prop="articleText">
          <el-input
            type="textarea"
            :placeholder="t('organizationStructure.Information.p15')"
            resize="none"
            :autosize="{ minRows: 6, maxRows: 6 }"
            v-model.trim="txtForm.articleText"
            :maxlength="500"
          ></el-input>
        </el-form-item>
        <div class="mt-2">
          <Uploads
            ref="upload1"
            :listType="'picture-card'"
            @change="setFileList"
          ></Uploads>
        </div>
      </el-form>

      <template #footer>
        <div class="dialog-footer flexcc">
          <el-button
            @click="closeFn"
            color="#252628"
            plain
            >{{ t('organizationStructure.cancel') }}</el-button
          >
          <el-button
            @click="addArticle"
            type="primary"
            color="#252628"
          >
            {{ t('organizationStructure.ok') }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 上传图片 -->
    <el-dialog
      v-model="uploadDialog"
      width="800px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4
            :id="titleId"
            :class="titleClass"
          >
            {{ t('organizationStructure.dlt1') }}
          </h4>
          <img
            src="@/assets/img/icon_guanbi.png"
            @click="close"
            class="close"
          />
        </div>
      </template>

      <Uploads
        ref="upload2"
        @change="setImgList"
        :listType="'picture-card'"
        :limit="9"
      ></Uploads>

      <template #footer>
        <div class="dialog-footer flexcc">
          <el-button
            @click="uploadDialog = false"
            color="#252628"
            plain
            >{{ t('organizationStructure.cancel') }}</el-button
          >
          <el-button
            type="primary"
            color="#252628"
            @click="addImgFn"
            >{{ t('organizationStructure.ok') }}</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import Uploads from '@/components/Uploads.vue'
import { onMounted, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { getTrendsList, deleteTrends, queryAlbum, uploadAlbum, deleteAlbum } from '@/service/organizationStructure'
import { getCustomerInfo, getZoningList, updateCustomerSimpleInfo, articleAdd, getCustomerInfoById } from '@/service/personalInformation'
import { uploads } from '@/service/common.js'
import { dateFormat, toText, openUrl } from '@/utils'
import router from '@/router'
import useLogin from '@/stores/login'
import { getCustomerInfoApi } from '@/service/login.js'
import ActicleComment from '@/components/ActicleComment.vue'

const storeLogin = useLogin()
const { setUserInfo } = storeLogin

const { t, locale } = useI18n()
watch(locale, () => {
  init()
})

const workStatusOption = ref([
  {
    label: t('personalInformation.l1'),
    value: '0'
  },
  {
    label: t('personalInformation.l2'),
    value: '1'
  }
])
const getWorkStatus = (val) => {
  return workStatusOption.value.find((item) => item.value === val)?.label
}

const customerClassCode = storeLogin.userInfo.customerClassCode

const isEdit = ref(false)
const trendsDialog = ref(false)
const uploadDialog = ref(false)
const diaologVis = ref(false)
watch(diaologVis, (n) => {
  if (!n) {
    txtFormEl.value.resetFields()
  }
})
const customerInfo = ref({})
const creatorInfo = ref({})
const zoningList = ref([])
const txtForm = ref({
  zoningId: undefined,
  articleText: undefined,
  customerId: undefined,
  articleTitle: undefined,
  articlePicture: undefined
})
const txtRules = ref({
  articleTitle: [{ required: false, message: t('input_p'), trigger: 'change' }],
  zoningId: [{ required: true, message: t('select_p'), trigger: 'change' }],
  articleText: [{ required: true, message: t('input_p'), trigger: 'change' }]
})
const txtFormEl = ref(null)
const deleteDialog = ref(false)
const chooseImgUrl = ref('')
const props = defineProps({})

const FileList = ref([])
const ImgList = ref([])
const upload1 = ref(null)
const upload2 = ref(null)

const openDialog = () => {
  diaologVis.value = true
}
const setImgList = (val) => {
  ImgList.value = val
}
const setFileList = (val) => {
  FileList.value = val
}
const handleUpload = (ref, list) => {
  return new Promise((resolve, reject) => {
    const newList = list.value.filter((item) => item.raw)
    const oldList = list.value.filter((item) => !item.raw).map((item) => item.url)

    if (newList.length) {
      const formData = new FormData()
      newList.forEach((item) => {
        formData.append('files', item.raw)
      })
      uploads(formData).then(({ urls }) => {
        const resultFile = urls.split(',')
        list.value = resultFile.map((item) => {
          return {
            name: item.slice(item.lastIndexOf('/') + 1),
            url: item
          }
        })
        // ref.value.setFileList(list)
        resolve([...oldList, ...resultFile])
      })
    } else {
      resolve(oldList)
    }
  })
}
//发布动态
const addTrendsForm = ref({
  customerId: storeLogin.userInfo.id,
  pushType: 1,
  trendsType: 1,
  trendsTitle: undefined,
  summaryImage: undefined,
  trendsSummary: undefined,
  createTime: new Date().getTime() / 1000,
  operateType: 0
})
const addArticle = async () => {
  if (!txtFormEl.value) return
  txtFormEl.value.validate(async (valid, fields) => {
    if (valid) {
      let res = await handleUpload(upload1, FileList)
      if (res.length) {
        txtForm.value.articlePicture = res.join()
      }
      let data = {
        ...txtForm.value,
        customerId: storeLogin.userInfo.id
      }

      articleAdd(data).then(({ msg }) => {
        ElMessage({
          type: 'success',
          message: msg
        })
        closeFn()
      })
    }
  })
}
//删除动态
const deleteTrendsFn = (item) => {
  ElMessageBox.confirm(t('popconfirm_del'), '', {
    confirmButtonText: t('confirmText'),
    cancelButtonText: t('cancelText'),
    type: 'warning'
  })
    .then(() => {
      deleteTrends(item.id).then(({ msg }) => {
        ElMessage({
          message: msg,
          type: 'success'
        })
        getTrendsListFn()
      })
    })
    .catch(() => {})
}

//  查看详情
const viewDetail = (item) => {
  if (['0', '1'].includes(item.trendsType)) return
  openUrl(`/blogDetail`, { id: item.articleId })
}

//获取相册
const queryAlbumList = ref([])
const albumQuery = ref({
  businessType: 1,
  businessId: storeLogin.userInfo.id,
  pageSize: 9,
  pageNum: 1
})
const queryAlbumFn = () => {
  queryAlbum(albumQuery.value).then((res) => {
    queryAlbumList.value = res.data
    chooseImgUrl.value = res.data[0]
  })
}
const closeFn = () => {
  txtForm.value = {
    zoningId: undefined,
    articleText: undefined,
    customerId: undefined,
    articleTitle: undefined,
    articlePicture: undefined
  }
  diaologVis.value = false
  getTrendsListFn()
}
//上传相册
const addImgFn = async () => {
  let data = {
    businessType: 1,
    businessId: storeLogin.userInfo.id,
    imagePath: undefined
  }
  let res = await handleUpload(upload2, ImgList)
  if (res.length) {
    data.imagePath = res.join()
  }
  uploadAlbum(data).then(({ msg }) => {
    ElMessage({
      message: msg,
      type: 'success'
    })
    queryAlbumFn()
    getTrendsListFn()
    ImgList.value = []
    uploadDialog.value = false
  })
}
//删除该图片
const deleteImgFn = () => {
  let data = {
    businessType: 1,
    businessId: storeLogin.userInfo.id,
    imagePath: chooseImgUrl.value
  }
  ElMessageBox.confirm(t('popconfirm_del'), '', {
    confirmButtonText: t('confirmText'),
    cancelButtonText: t('cancelText'),
    type: 'warning'
  })
    .then(() => {
      deleteAlbum(data).then(({ msg }) => {
        ElMessage({
          message: msg,
          type: 'success'
        })
        deleteDialog.value = false
        queryAlbumFn()
        getTrendsListFn()
      })
    })
    .catch(() => {})
}
const saveChangeInfo = () => {
  // userName: null 英文名不修改
  // 编辑保存去除头像保存
  const { avatar, ...obj } = customerInfo.value
  updateCustomerSimpleInfo({ ...obj, userName: null }).then(({ msg }) => {
    ElMessage({
      type: 'success',
      message: msg
    })
    isEdit.value = false
    getCustomerInfoByIdFn()
    getUserInfo()
  })
}

// 动态
const page = ref({
  pageNum: 1, // 当前页码
  pageSize: 4 // 每页条数
})
const total = ref(0) // 总数
const trendsListData = ref([])
const getTrendsListFn = () => {
  getTrendsList({
    pushType: 0,
    customerId: storeLogin.userInfo.id,
    ...page.value
  }).then(({ rows, total: t }) => {
    rows.forEach((item) => {
      item.isShowMore = false
      item.imgList = item.summaryImage?.split(',')?.slice(0, 6) || []
      item.imgListAll = item.summaryImage?.split(',') || []

      item.commentFlag = false
      item.shareFLag = false
      item.likeFlag = item.isLike > 0 ? true : false
      item.collectFlag = item.isCollect > 0 ? true : false
    })
    trendsListData.value = rows
    total.value = t
  })
}
// 分页
const handleCurrentChange = (val) => {
  getTrendsListFn()
}

const getCustomerInfoByIdFn = () => {
  getCustomerInfoById(storeLogin.userInfo.id).then((res) => {
    customerInfo.value = res.data
  })
}

// 获取登录用户信息 更新store
const getUserInfo = () => {
  getCustomerInfoApi().then(({ data }) => {
    setUserInfo(data)
    router.go(0)
  })
}

const init = () => {
  getCustomerInfoByIdFn()
  getCustomerInfo({ customerId: storeLogin.userInfo.id }).then((res) => {
    creatorInfo.value = res.data
  })
  getZoningList({ pageSize: 999, pageNum: 1 }).then((res) => {
    zoningList.value = res.rows
  })
  getTrendsListFn()
  queryAlbumFn()
}

onMounted(() => {
  init()
})
</script>
<style scoped lang="scss">
.pre-box {
  .pre-img {
    width: 100%;
    padding: 50px;
    position: relative;
    border-bottom: 2px solid black;

    img {
      width: 820px;
      height: 330px;
      border: 1px solid;
    }

    button {
      position: absolute;
      right: 20px;
      top: 10px;
    }
  }

  .thumbnail-list {
    width: 100%;
    height: 140px;
    display: flex;
    justify-content: center;
    padding: 20px 0px;

    // background: rgb(245,245,245);
    li {
      width: 110px;
      height: 110px;

      cursor: pointer;

      &:not(:last-child) {
        margin-right: 20px;
      }

      img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        border: 1px solid;
      }
    }

    .active {
      border: 2px solid rgb(202, 42, 2);
      border-radius: 10px;
    }
  }
}

.main {
  display: flex;

  .left {
    width: 410px;
    margin-right: 20px;
    min-height: 200px;

    .card-header {
      display: flex;
      line-height: 40px;
      font-size: 18px;

      font-weight: bold;
      color: #252628;

      span:first-child {
        flex: 9;
        font-size: 20px;
      }
    }

    .box-card {
      min-height: 316px;
      margin-bottom: 30px;
      width: 100%;

      .img-list {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;

        li {
          width: 100%;
          height: 110px;
          margin-top: 10px;
          cursor: pointer;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .right {
    flex: 1;
    min-height: 200px;

    .card-header {
      display: flex;
      line-height: 40px;
      font-size: 18px;

      font-weight: bold;
      color: rgba(202, 42, 2, 1);

      span:first-child {
        flex: 9;
        font-size: 20px;
      }
    }

    .box-card {
      padding-left: 20px;
      width: 100%;

      .list-box {
        width: 100%;
        max-width: 830px;
        // max-height: 820px;
        overflow-y: auto;
        padding-right: 10px;

        .item {
          max-width: 758px;
          min-height: 181px;
          margin-bottom: 23px;
          background: rgba(245, 245, 245, 1);
          padding: 20px;
          position: relative;

          .del-btn {
            position: absolute;
            right: 20px;
            top: 20px;
          }

          .date-type {
            width: 100%;
            font-size: 14px;

            font-weight: 400;
            color: #9d9fa5;
            display: flex;
            justify-content: space-between;
            line-height: 40px;

            span {
              color: #ca2a02;
            }

            i {
              font-style: normal;
            }

            img {
              cursor: pointer;
            }
          }

          .title {
            font-size: 20px;
            font-weight: bold;
            color: #252628;
            margin-bottom: 24px;
            cursor: pointer;
          }

          .content {
            font-size: 14px;
            color: #6a6973;
            white-space: pre-line;
            overflow-wrap: break-word;
            .show-more {
              color: #000;
              cursor: pointer;
            }
          }

          .imglist {
            .el-image {
              width: 100px;
              height: 100px;
              background: #eaebec;
              margin-right: 14px;
            }

            .more {
              width: 100px;
              height: 100px;
              background: rgba(0, 0, 0, 0.3);
              margin-left: -114px;
              position: relative;
              z-index: 9;
              color: #fff;
              font-size: 28px;
              pointer-events: none;
            }
          }

          .likeList {
            img {
              width: 30px;
              height: 30px;
              background: #d99993;
              border-radius: 4px;
              margin-right: 10px;
            }
          }
        }
      }

      // ::-webkit-scrollbar {
      //     /*滚动条整体样式*/
      //     width: 4px;
      //     /*高宽分别对应横竖滚动条的尺寸*/
      //     height: 1px;
      // }

      // ::-webkit-scrollbar-thumb {
      //     /*滚动条里面小方块*/
      //     border-radius: 10px;
      //     box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
      //     background: #78b4b4;
      // }

      // ::-webkit-scrollbar-track {
      //     /*滚动条里面轨道*/
      //     box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
      //     border-radius: 10px;
      //     background: #ededed;
      // }
    }
  }
}

.divider {
  width: 100%;
  height: 3px;
  background: black;
  margin-bottom: 36px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.user-info {
  display: flex;

  .head-sculpture {
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 12px;
    }
  }

  .name {
    padding-top: 4px;
    width: 300px;

    h2 {
      font-size: 16px;

      font-weight: bold;
      color: #252628;

      .date {
        font-size: 14px;

        font-weight: 400;
        color: #9d9fa5;
      }
    }

    p {
      font-size: 14px;

      font-weight: 400;
      color: #9d9fa5;
      margin-top: 4px;
    }
  }
}

.partition {
  font-size: 16px;

  font-weight: bold;
  color: #252628;

  span {
    color: rgba(202, 42, 2, 1);
  }
}

.btn-list {
  width: 100%;
  display: grid;
  // flex-direction: ;
  margin-top: 20px;
  margin-bottom: 20px;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;

  button {
    border-radius: 0px;
    background: rgb(250, 198, 185);
    font-size: 12px;

    font-weight: 400;
    color: #1c1e22;
    border: 1px solid rgb(250, 198, 185);
    width: 128px;
    overflow: hidden;
  }

  .el-button + .el-button {
    margin-left: 0;
  }

  .active {
    border: 1px solid rgba(202, 42, 2, 1);
    background: rgba(202, 42, 2, 1);
    color: white;
  }
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.page-divider {
  width: 100%;
  height: 2px;
  background: black;
  margin-bottom: 10px;
  margin-top: 10px;
}
</style>
